<template>
    <div>
        <Card dis-hover :bordered="false">
            <Button type="primary" class="ivu-mt-8 ivu-mb-16" @click="handleAdd">新增</Button>
            <Table highlight-row :loading="loading" :columns="columns" :data="dataWithPage" border>
                <template slot="status" slot-scope="{row}">
                    <Badge v-if="row.status === true" status="success" text="正常" />
                    <Badge v-else status="error" text="停用" />
                </template>
                <template slot="action" slot-scope="{row}">
                    <a @click="handleEdit(index)">{{row.action[0]}}</a>
                    <Divider type="vertical" />
                    <a @click="handleDetele(index)">{{row.action[1]}}</a>
                </template>
            </Table>
        </Card>
        <div class="ivu-mt ivu-text-center" slot="footer">
            <Page :total="limiData.length" :current.sync="current" show-elevator show-sizer show-total></Page>
        </div>
        <Modal :title="edit? '新增': '编辑'" v-model="createModal" :mask-closable="false" width="800">
            <Form :model="formData" :label-width="118">
                <h4>基本信息</h4>
                <Divider class="ivu-mt-8 ivu-mb-16" />
                <FormItem label="工作流名称：">
                    <Input placeholder="请输入" />
                </FormItem>
                <FormItem label="描述：">
                    <Input type="textarea" placeholder="请输入" />
                </FormItem>
                <FormItem label="目标模块：">
                    <Select>
                        <Option value></Option>
                    </Select>
                </FormItem>
                <h4>工作流触发器</h4>
                <Divider class="ivu-mt-8 ivu-mb-16" />
                <FormItem label="触发工作流在：">
                    <RadioGroup v-model="formData.radio">
                        <Radio label="创建" />
                        <Radio label="更新（包括创建）" />
                        <Radio label="时间间隔" />
                    </RadioGroup>
                </FormItem>
                <FormItem v-if="formData.radio ==='更新（包括创建）'" label="重复：">
                    <RadioGroup v-model="formData.repeat">
                        <Radio label="仅第一次条件满足时" />
                        <Radio label="每次条件满足时" />
                    </RadioGroup>
                </FormItem>
                <FormItem v-if="formData.radio === '时间间隔'" label="频率：">
                    <Select v-width="180" v-model="formData.rate">
                        <Option v-for="item in timeList" :key="item.value" :value="item.value">{{item.label}}</Option>
                    </Select>
                </FormItem>
                <FormItem v-if="formData.rate === '每天'" label="时间：">
                    <TimePicker type="time"></TimePicker>
                </FormItem>
                <div v-if="formData.rate === '每周'">
                    <FormItem label="星期选择：">
                        <CheckboxGroup>
                            <Checkbox label="星期一"></Checkbox>
                            <Checkbox label="星期二"></Checkbox>
                            <Checkbox label="星期三"></Checkbox>
                            <Checkbox label="星期四"></Checkbox>
                            <Checkbox label="星期五"></Checkbox>
                            <Checkbox label="星期六"></Checkbox>
                            <Checkbox label="星期七"></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                    <FormItem label="时间：">
                        <TimePicker type="time"></TimePicker>
                    </FormItem>
                </div>
                <div v-if="formData.rate === '特定的日期'">
                    <FormItem label="选择日期：">
                        <DatePicker :editable="false" type="date" />
                    </FormItem>
                    <FormItem label="时间：">
                        <TimePicker type="time"></TimePicker>
                    </FormItem>
                </div>
                <div v-if="formData.rate === '每月的指定日期'">
                    <FormItem label="选择日期：">
                        <Select multiple>
                            <Option value="1"></Option>
                            <Option value="2"></Option>
                            <Option value="3"></Option>
                            <Option value="30"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label="时间：">
                        <TimePicker type="time"></TimePicker>
                    </FormItem>
                </div>
                <h4>工作流条件</h4>
                <Divider class="ivu-mt-8 ivu-mb-16" />
                <FormItem label="所有条件:">
                    <Select v-width="118">
                        <Option value></Option>
                    </Select>
                    <Select v-width="118" class="ivu-ml-8">
                        <Option value></Option>
                    </Select>
                    <Input class="ivu-ml-8" v-width="118" />
                    <span class="ivu-ml-16">(所有条件都必须满足)</span>
                    <Button class="ivu-block ivu-mt-16">+新增</Button>
                </FormItem>
                <FormItem label="任意条件:">
                    <Select v-width="118">
                        <Option value></Option>
                    </Select>
                    <Select v-width="118" class="ivu-ml-8">
                        <Option value></Option>
                    </Select>
                    <Input class="ivu-ml-8" v-width="118" />
                    <span class="ivu-ml-16">(必须至少一个条件满足)</span>
                    <Button class="ivu-block ivu-mt-16">+新增</Button>
                </FormItem>
                <h4>工作流操作</h4>
                <Divider class="ivu-mt-8 ivu-mb-16" />
                <ButtonGroup size="small" class="ivu-mb-16">
                    <Button @click="handleCreateTask">创建任务</Button>
                    <Button>发送微信</Button>
                    <Button>发送短信</Button>
                    <Button>更新字段</Button>
                    <Button>创建记录</Button>
                    <Button>发送钉钉</Button>
                </ButtonGroup>
                <Table highlight-row :columns="columns1" :data="data1" border>
                    <template slot="action" slot-scope="{row}">
                        <a>{{row.action[0]}}</a>
                        <Divider type="vertical" />
                        <a>{{row.action[1]}}</a>
                    </template>
                </Table>
            </Form>
        </Modal>
        <Modal title="添加工作流" v-model="addWorkFlow" :mask-closable="false" width="680">
            <Form :label-width="100">
                <FormItem label="名称：">
                    <Input placeholder="请输入" />
                </FormItem>
                <FormItem label="任务标题：">
                    <Input placeholder="请输入" />
                </FormItem>
                <FormItem label="描述：">
                    <Input type="textarea" placeholder="请输入" />
                </FormItem>
                <FormItem label="状态：">
                    <Select>
                        <Option value></Option>
                    </Select>
                </FormItem>
                <FormItem label="优先级：">
                    <Select>
                        <Option value></Option>
                    </Select>
                </FormItem>
                <FormItem label="分配给：">
                    <Select>
                        <Option value></Option>
                    </Select>
                </FormItem>
                <FormItem label="时间：">
                    <DatePicker :editable="false" type="date" />
                </FormItem>
                <FormItem label="截止日期：">
                    <Input v-width="80" />
                    <span class="ivu-ml-16">天</span>
                    <Select v-width="80" class="ivu-ml-16">
                        <Option value="之前">之前</Option>
                        <Option value="之后">之后</Option>
                    </Select>
                    <Select v-width="150" class="ivu-ml-16">
                        <Option value="创建时间">创建时间</Option>
                        <Option value="修改时间">修改时间</Option>
                    </Select>
                </FormItem>
                <FormItem label="钉钉推送：">
                    <Checkbox>是</Checkbox>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: false,
            current: 1,
            addWorkFlow: false,
            timeList: [
                {
                    value: '每小时',
                    label: '每小时'
                },
                {
                    value: '每天',
                    label: '每天'
                },
                {
                    value: '每周',
                    label: '每周'
                },
                {
                    value: '特定的日期',
                    label: '特定的日期'
                },
                {
                    value: '每月的指定日期',
                    label: '每月的指定日期'
                },
                {
                    value: '每年',
                    label: '每年'
                }
            ],
            edit: true,
            size: 10,
            formData: {
                name: '',
                modular: '',
                radio: '创建',
                repeat: '仅第一次条件满足时',
                rate: ''
            },
            createModal: false,
            columns: [
                {
                    title: '模块',
                    key: 'moludar'
                },
                {
                    title: '工作流名称',
                    key: 'name'
                },
                // {
                //     title: '触发时机',
                //     key: 'opportunity'
                // },
                // {
                //     title: '触发条件',
                //     key: 'condition'
                // },
                {
                    title: '状态',
                    slot: 'status'
                },
                {
                    title: '操作',
                    slot: 'action'
                }
            ],
            list: [],
            columns1: [
                {
                    title: '名称',
                    key: 'name'
                },
                {
                    title: '类型',
                    key: 'type'
                },
                {
                    title: '操作',
                    slot: 'action'
                }
            ],
            data1: [
                {
                    name: '自动任务测试',
                    type: '创建任务',
                    action: ['编辑', '删除']
                }
            ]
        }
    },
    computed: {
        limiData() {
            let data = [...this.list]
            return data
        },
        dataWithPage() {
            const data = this.limiData
            const start = this.current * this.size - this.size
            const end = start + this.size
            return [...data].slice(start, end)
        }
    },
    methods: {
        mockData() {
            const item = {}
            item.moludar = '客户'
            item.name = '测试名称工作流'
            // item.opportunity = '每次条件满足时'
            // item.condition = '全部条件'
            item.status = this.status()
            item.action = ['编辑', '删除']
            return item
        },
        status() {
            let value = Math.floor(Math.random(0) * 2)
            if (value === 1) return true
            else return false
        },
        getData() {
            this.loading = true
            setTimeout(() => {
                let data = []
                for (let i = 0; i < 50; i++) {
                    data.push(this.mockData())
                }
                this.list = data
                this.loading = false
            }, 1000)
        },
        handleAdd() {
            this.createModal = true
        },
        handleEdit() {},
        handleDetele() {},
        handleCreateTask() {
            this.addWorkFlow = true
        }
    },
    mounted() {
        this.getData()
    }
}
</script>